<template>
  <div class="heatChart">
    <div id="gd"></div>
  </div>
</template>
<script setup lang="ts" name="heatChart">
import { nextTick, watch } from "vue";
import Plotly from "plotly.js-dist-min";
const props = defineProps({
  dataList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

watch(
  () => props.dataList,
  (newVal) => {
    if (newVal.length) {
      createChart(newVal);
    }
  },
  {
    deep: true,
  }
);

function createChart(zArr) {
  nextTick(() => {
    Plotly.newPlot("gd", {
      data: [
        {
          z: zArr,
          x: Array.from({ length: 35 }, (v, i) => (i + 1) * 500),
          y: Array.from({ length: 9 }, (v, i) => (i + 1) * 8),
          type: "contour",
        },
      ],
      layout: {
        width: 1200,
        height: 800,
        title: "电机状态驱动电机系统效率(%)",
        xaxis: {
          title: "转速(r/min)",
          showgrid: false,
          fixedrange: true
        },
        yaxis: {
          title: "扭矩(N·m)",
          showgrid: false,
          fixedrange: true
        },
      },
      config: {
        modeBarButtonsToRemove: [
          "zoom2d",
          "pan2d",
          "zoomIn2d",
          "zoomOut2d",
          "autoScale2d",
          "resetScale2d",
        ],
        displaylogo: false,
        responsive: true,
      },
    });
  });
}
onMounted(() => {
  let arr = [
    // [
    //   45.8, 54, 59.2, 60.6, 61.8, 60.5, 62, 63.5, 61.8, 60, 60.8, 60.8, 60,
    //   59.4, 60, 58.8, 57.6, 57.6, 55.7, 54.2, 52.9, 51.2, 55.3, 48.5, 47.1, 47,
    //   44.1, 42.6, 41.8, 39.7, 35.9, 36.2, 33.8, 29.1, 25.9, 6.9,
    // ],
    // [
    //   56.8, 66.5, 70.6, 72.9, 73.9, 73.7, 74.4, 73.4, 71.9, 71.1, 74, 74.7,
    //   73.3, 71.9, 72, 72.4, 69.9, 68.7, 68.5, 68.2, 69.5, 68.9, 71.9, 70.8,
    //   69.5, 70.7, 69.5, 69.7, 71.6, 70.1, 70.1, 66.9, 68.9, 66, 67.9, 60.8,
    // ],
    // [
    //   60.9, 70.5, 75.1, 74.9, 76.9, 77.4, 77.1, 76.9, 76.8, 79.2, 79.4, 79.9,
    //   79.9, 80.1, 81.2, 80.7, 81.7, 82.5, 79.9, 80.4, 80.5, 81.2, 81.3, 79.9,
    //   80.2, 80.5, 80.5, 79.8, 80, 79.3, 80.5, 80, 80.1, 79.9, 78.9, 78.4,
    // ],
    // [
    //   64.5, 73.2, 76.9, 79.3, 79.5, 79.8, 80.1, 80.6, 81.1, 82.5, 82.7, 83.1,
    //   83.5, 84.2, 84.9, 84.8, 85.6, 85.2, 85.4, 85.3, 85, 86.4, 86.6, 83.6,
    //   85.2, 85.9, 85.6, 85.2, 85.7, 84.9, 85.3, 85, 84.9, 84.8, 84.1, 83.3,
    // ],
    // [
    //   64.7, 74.3, 78.3, 80.3, 80.9, 81.6, 82.6, 82.7, 83.3, 84.2, 85, 85.4,
    //   85.6, 86.3, 87.2, 87.1, 87.8, 87.9, 88.1, 87.8, 88.4, 88.5, 88.6, 88.8,
    //   87.9, 88.4, 88.1, 87.8, 88, 87.6, 87.3, 87.3, 87, 86.8, 85.8, 85,
    // ],
    // [
    //   65.1, 75.3, 79.2, 81.2, 81.9, 82.9, 83.9, 84.4, 84.7, 85.5, 86.4, 86.8,
    //   87.3, 87.7, 88, 89.2, 88.8, 89.3, 89.5, 89.3, 89.7, 89.7, 89.7, 89.3,
    //   89.5, 89.7, 89.3, 89, 88.7, 88.2, 88, 87.8, 87.4, 87.1, 86.2, 85.2,
    // ],
    // [
    //   64.7, 75.6, 79.7, 81.8, 83.2, 84, 84.7, 85.2, 85.7, 86.4, 87.1, 87.7,
    //   88.2, 88.7, 88.9, 89.5, 89.4, 89.8, 90.4, 90.2, 90.5, 90.8, 90.8, 89.8,
    //   89.9, 89.7, 89.5, 89.6, 89.2, 88.7, 88.2, 87.1, 87.1, 86.5, 85.1, 84.5,
    // ],
    // [
    //   64.6, 75.5, 79.8, 81.8, 83.4, 84.5, 85.3, 85.9, 86.5, 87.1, 87.7, 88.4,
    //   88.7, 89.2, 89.5, 90, 90.3, 90.5, 90.8, 91.3, 91.2, 90.8, 91, 90.6, 90.3,
    //   90.1, 89.9, 89.4, 89, 88.5, 87.4, 87.6, 86.3, 85.3, 83.2, 80.8,
    // ],
    // [
    //   64.3, 75.1, 80, 82.2, 83.4, 84.6, 85.5, 86, 86.8, 87.5, 88, 88.7, 89.3,
    //   89.7, 90.1, 90, 90.8, 91.2, 91.2, 91.4, 91.3, 91.2, 91.2, 90.4, 90.5,
    //   89.8, 89.4, 89.2, 88.1, 87.6, 86.5, 85.7, 84.3, 83.4, 80.4, 78.8,
    // ],
    // [
    //   64, 75, 79.7, 81.8, 83.4, 84.6, 85.6, 86.4, 86.9, 87.8, 88.3, 88.8, 89.4,
    //   89.9, 90.3, 90.3, 91.3, 91.4, 91.8, 91.6, 91.5, 91.1, 90.9, 90.4, 90.1,
    //   89.7, 88.6, 88.5, 87.6, 86.5, 85, 81.5, 79.9, 81.8,
    // ],
    // [
    //   62.7, 74.7, 79.5, 82.3, 83.7, 84.9, 85.9, 86.5, 87.4, 88, 88.5, 89.3,
    //   89.7, 90.2, 90.8, 90.7, 91.2, 91.6, 91.8, 91.4, 91.6, 91.2, 90.7, 90.2,
    //   89.5, 88.9, 88.3, 87.3, 86.1, 84.9, 83, 77.7,
    // ],
    // [
    //   62.7, 74.6, 79.3, 81.9, 83.7, 84.7, 85.8, 86.7, 87.3, 88, 88.7, 89.1,
    //   89.8, 90.4, 90.6, 91.2, 91.5, 91.7, 91.6, 91.1, 91.3, 91.1, 90.5, 89.9,
    //   89.2, 88.3, 87.3, 86.1, 84.4, 82.4, 79.4,
    // ],
    // [
    //   62, 73.9, 79, 81.6, 83.5, 84.6, 85.8, 86.6, 87.4, 88, 88.7, 89.3, 89.9,
    //   90.2, 90.6, 91.1, 91.5, 91.7, 91.9, 91.3, 91.3, 90.5, 90.3, 89.2, 88.9,
    //   87.5, 86.1, 84.2, 80.8,
    // ],
    // [
    //   61, 73.4, 78.7, 81.3, 83.4, 84.6, 85.9, 86.6, 87.5, 88.1, 88.8, 89.5, 90,
    //   90.5, 90.8, 91.3, 91.4, 91.6, 91.2, 91.1, 90.7, 90.2, 89.5, 88.7, 87.8,
    //   85.9, 83.9, 81.6,
    // ],
    // [
    //   60.6, 73.1, 78.4, 81.2, 83.2, 84.6, 85.8, 86.7, 87.5, 88.1, 88.9, 89.5,
    //   90, 90.4, 90.9, 91.2, 91.6, 91.4, 91.4, 90.8, 90.4, 89.7, 88.8, 87.5,
    //   86.4, 84, 81.3,
    // ],
    // [
    //   59.9, 72.6, 78.1, 81.1, 83.1, 84.4, 85.6, 86.6, 87.3, 88.1, 88.9, 89.4,
    //   90, 90.5, 90.7, 91, 91.7, 91.4, 91, 90.5, 89.6, 89, 88, 87.2, 84.8, 81.9,
    // ],
    // [
    //   59, 72.1, 77.9, 80.9, 82.6, 83.7, 85.5, 86.4, 87.3, 88, 88.9, 89.4, 90,
    //   90.3, 90.9, 91.3, 91.4, 90.9, 90.8, 90.1, 89.2, 89, 87.4, 85.3, 82.8,
    // ],
    // [
    //   58.4, 71.6, 77.3, 80.4, 82.7, 84.2, 85.2, 86.3, 87.2, 87.9, 88.7, 89.5,
    //   90, 90.1, 90.8, 91.2, 91.2, 90.9, 90.4, 90.1, 89.1, 87.8, 85.5, 84.7,
    // ],
    // [
    //   57.8, 71.1, 76.7, 80.2, 82.5, 84.1, 85.2, 86.2, 87.2, 87.8, 88.6, 89.3,
    //   89.8, 90.1, 90.9, 91, 90.9, 90.5, 89.8, 89.4, 87.9, 86.3, 84.2,
    // ],
    // [
    //   57.2, 70.5, 76.5, 79.8, 82, 84.1, 85.1, 86, 87, 87.7, 88.6, 89, 89.6,
    //   90.1, 90.6, 91, 90.6, 90.2, 89.7, 88.6, 87.1, 85.3, 82.9,
    // ],
    // [
    //   56.3, 70, 76, 79.2, 81.9, 83.4, 84.7, 86.2, 87, 87.6, 88.5, 89.1, 89.6,
    //   90.1, 90.5, 90.9, 90.4, 90.1, 89, 88, 85.9, 83.7,
    // ],
    // [
    //   55.5, 69.3, 75.6, 79, 81.5, 83.5, 84.8, 85.9, 86.9, 87.7, 88.2, 88.9,
    //   89.5, 90, 90.7, 90.6, 90.3, 89.3, 88.7, 86.7, 84.3,
    // ],
    // [
    //   55.2, 68.7, 75, 79.1, 81.6, 83, 84.6, 85.5, 86.7, 87.5, 88.1, 88.6, 89.3,
    //   89.7, 90.5, 90.4, 89.8, 88.7, 87.8, 84.3, 82.1,
    // ],
    // [
    //   54, 68.5, 74.8, 78.7, 81, 82.7, 84.2, 85.3, 86.4, 87.3, 87.9, 88.5, 89.2,
    //   89.7, 90.3, 90.1, 89.8, 88.3, 87.5, 82.6,
    // ],
    // [
    //   52.5, 67.9, 74.4, 77.5, 80.5, 82.6, 84, 85.4, 86.3, 87.1, 87.8, 88.5, 89,
    //   89.7, 90, 89.8, 89.3, 87.2, 86.2,
    // ],
    // [
    //   53.2, 67.1, 73.9, 77.6, 79.9, 82.4, 84, 85.2, 86.2, 87.1, 87.6, 88.3,
    //   89.2, 89.7, 90, 89.6, 88.9, 86.8, 85.3,
    // ],
    // [
    //   52.3, 66.7, 73.6, 77.8, 80.3, 82, 83.7, 84.8, 85.9, 86.7, 87.5, 88.3,
    //   88.7, 89.5, 89.8, 89.3, 88.3, 86.4, 84.3,
    // ],
    // [
    //   51.5, 66.6, 73.3, 77.2, 79.9, 81.7, 83.4, 84.9, 85.8, 86.5, 87.4, 88.2,
    //   88.8, 89.4, 89.5, 88.9, 87.8, 85.4,
    // ],
    // [
    //   51.8, 66.1, 72.4, 76.7, 79.4, 81.9, 83.4, 84.5, 85.5, 86.5, 87.3, 87.9,
    //   88.8, 89.2, 89.4, 88.7, 86.8, 84.6,
    // ],
    // [
    //   49.3, 65.1, 72.3, 76.8, 79.5, 81.2, 83, 84.4, 85.4, 86.3, 87.2, 87.9,
    //   88.5, 89.2, 89.1, 88.4, 86.2, 84.9,
    // ],
    // [
    //   48.5, 65.2, 72, 76.2, 78.9, 81.3, 83.1, 84.2, 85.2, 86.2, 86.9, 87.6,
    //   88.4, 89, 88.9, 87.5, 85.7,
    // ],
    // [
    //   48.3, 64.3, 71.6, 76, 78.8, 80.9, 82.6, 83.8, 85.1, 85.8, 86.8, 87.7,
    //   88.3, 89.1, 88.3, 87, 85.6,
    // ],
    // [
    //   47.6, 64.6, 71.4, 75.7, 78.8, 80.8, 82.5, 83.7, 84.9, 85.8, 86.5, 87.4,
    //   88.3, 88.6, 88.1, 86.7,
    // ],
    // [
    //   47.8, 63.6, 70.6, 75.2, 78.1, 80.3, 82, 83.5, 84.6, 85.5, 86.4, 87.2,
    //   88.1, 88.6, 87.9, 86.1,
    // ],
    // [
    //   46.7, 63.5, 70.7, 74.7, 77.8, 80.2, 82, 83.2, 84.3, 85.4, 86.1, 87, 88,
    //   88.2, 87.3,
    // ],
    // [
    //   46.7, 62.5, 69.5, 74.6, 77.5, 79.9, 81.5, 83.1, 84.3, 85.2, 85.9, 87,
    //   87.8, 88.1, 87.2,
    // ],
    // [
    //   46.2, 62.3, 69.5, 73.8, 76.9, 79.6, 81.3, 82.6, 83.9, 84.9, 85.7, 87.1,
    //   87.5, 87.8,
    // ],
    // [
    //   45.5, 61.2, 68.8, 73.8, 77, 79.3, 81.2, 82.5, 83.5, 84.8, 85.5, 86.4,
    //   87.3, 87.6,
    // ],
    // [
    //   45.5, 60.7, 68.3, 73.2, 76.6, 79, 80.8, 82.4, 83.6, 84.6, 85.3, 86.6,
    //   87.1,
    // ],
    // [44.9, 61.1, 68.7, 72.9, 76.1, 78.8, 80.7, 82.3, 83.6, 84.5, 85.5],
  ];
  let zArr = arr;
});
</script>
<style scoped>
/* @import url(); 引入css类 */
#gd {
  display: flex;
  justify-content: center;
}
</style>
